<script lang="ts" setup>
import { ref } from "vue";
import Child from './Child.vue'
defineOptions({
    name: "index",
});
//--================= Data

let car = ref("比亚迪");
let toy = ref("");

//--================= Methods

function getToy(value: any) {
    // console.log(value);
    toy.value = value;
}
//--================= Other


</script>

<template>
    <div class="main">
        <h3>父组件</h3>
        <span>Remark: 父给子传数据，只要通过属性传过去可以了</span> <br>
        <span>Remark2: 子给父传数据，只要通方法的方式传递</span>

        <h4>汽车：{{ car }}</h4>
        <h4 v-if="toy">儿子给的玩具：{{ toy }}</h4>
        <Child :car="car" :sendToy="getToy" />
    </div>
</template>

<style scoped>
.main {
    background-color: #eee;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
    min-height: 500px;
}
</style>
